<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>微咸鱼后台管理界面</title>

    <!-- Bootstrap -->
    <link href="/goods/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="/goods/build/css/custom.min.css" rel="stylesheet">
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <!-- page content -->
        <div class="">
            <div class="page-title">
                <!--logo-->
                <a href="#">
                    <div class="title_left" style="margin-left: 2%;">
                        <h3><small>微咸鱼后台管理界面</small></h3>
                    </div>
                </a>
            </div>

            <div class="clearfix"></div>

            <!--主体内容部分-->
            <div class="row">
                <div class="col-md-12">
                    <div class="x_panel">

                        <div class="x_content">

                            <p>可以发布或下架已发布的闲置物品</p>
                            <a href="/good/addGood" class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i> 添加 </a>
                            <!-- start project list -->
                            <table class="table table-striped projects">
                                <thead>
                                <tr>
                                    <th style="width: 26%;">商品名称</th>
                                    <th style="width: 15%;">价格</th>
                                    <th style="width: 25%;">商品介绍</th>
                                    <th style="width: 15%;">发布日期</th>
                                    <th style="width: 6%;">库存数量</th>
                                    <th style="width: 12%">编辑</th>
                                </tr>
                                </thead>
                                <tbody class="goods-content">

                                </tbody>
                            </table>
                            <!-- end project list -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /page content -->
</div>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript"  th:inline="javascript">
    // 获取后台传来的商品信息goodsInfo
    // var trade = [[${goodsInfo}]];
    var trade = [];
    var goods = []

    $.ajax({
        url:'/publishedGood',
        type:"post",
        data:{
            // userId:user.id,
            userId:1001,
        },
        dataType:"json",
        success:function(res){
            trade = res.data;
            console.log(trade)
            console.log(trade.length)
            // 将商品信息中存储的good_name,good_price,good_introduce,good_date,good_number,good_image,good_id依次赋值
            for(let i = 0;i < trade.length; i++){
                const good_name = trade[i]["good_name"];
                const good_price = trade[i]["good_price"];
                const good_introduce = trade[i]["good_introduce"];
                const good_date = trade[i]["good_date"];
                const good_number = trade[i]["good_number"];
                const good_image = trade[i]["good_image"];
                // const good_image = 'http://localhost:8080/img/' + trade[i][5];
                const good_id = trade[i]["good_id"];

                // 将商品信息存入goods数组中
                goods.push({
                    name: good_name,
                    price: good_price,
                    introduce: good_introduce,
                    date: good_date,
                    number: good_number,
                    imgUrl: good_image,
                    id:good_id
                })
            }

            // 根据goods数组中的商品信息,在前端goodManage页面中,形成一行行的商品信息
            var x;
            for (x in goods) {
                document.getElementsByClassName("goods-content")[0].innerHTML +=
                    '<tr id="good_' + goods[x].id + '">' +
                    '<td>' + goods[x].name + '</td>' +
                    '<td>' + goods[x].introduce + '</td>' +
                    '<td>' + goods[x].price + '</td>' +
                    '<td>' + goods[x].date + '</td>' +
                    '<td>' + goods[x].number + '</td>' +
                    '<td>' +
                    '<a id="' + goods[x].id + '" href="/good/modifyGood?good_name=' + goods[x].name + '&good_introduce='+ goods[x].introduce + '&good_price='+ goods[x].price +'&good_date='+  goods[x].date + '&good_number='+ goods[x].number + '" class="btn btn-info btn-xs" onclick="modifyGood(this)"><i class="fa fa-pencil"></i>编辑</a>' +
                    '<button id="' + goods[x].id + '" class="btn btn-danger btn-xs" type="submit" onclick="deleteGood(this)"><i class="fa fa-trash-o"></i>删除</button>' +
                    '</td>' +
                    '</tr>'
            }
        }
    })



    /**
     * 点击 modifyGood 按钮,提交点击对象的id值,传递给后端的/good/bmodifyGood
     * @param event
     */
    function modifyGood(event) {
        // alert("运行了umodifyGood")
        var good_id = event.id;
        alert(good_id)
        $.ajax({
            url: "/good/bmodifyGood",
            data: {
                good_id: good_id
            },
            dataType: "json",
            success: function () {

            },
            error: function () {
                alert("页面跳转失败");
            }
        });
    }

    /**
     * 点击 deleteGood 按钮,提交点击对象的id值,传递给后端的/good/bdeleteGood
     * @param event
     * 成功:提示信息“删除成功”,并删除该行的商品信息
     * 失败:提示信息"删除失败"
     */
    function deleteGood(event) {
        // alert("运行了udeleteGood")
        var good_id = event.id;
        // alert(event.id)
        $.ajax({
            url: "/good/udeleteGood",
            type: "POST",
            data: {
                good_id: good_id
            },
            dataType: "json",
            success: function (data) {
                if (data.status == "success") {
                    alert("删除成功");
                    $("#good_" + event.id).remove();
                }
            },
            error: function (data) {
                alert("删除失败");
            }
        });
    }
</script>

</html>